<template>
	<view>
		<view class="bg">
			<image src="../../../static/背景@2x.png" mode=""></image>
			<image src="../../../static/person.jpg" mode="" class="photo" @click="goToInfo"></image>
			<text class="name">人类高质量前端</text>
			<view class="c1" style="visibility: hidden;">
				<view class="register" @click="goToRegister">
					<text>注册</text>
				</view>
				<view class="login" @click="goToLogin">
					<text>登录</text>
				</view>
			</view>
			<view class="invitation">
				<text>我的邀约单</text>
				<view class="btn" @click="goToInvitation">立即查看</view>
			</view>
		</view>
		
		<!-- 拍卖模块 -->
		
		<view class="auction">
			<view class="list" @click="goToAuction">
				<view>
					<text class="amount">5</text>
				</view>
				<view>
					<text>我的拍卖</text>
				</view>
			</view>
			<view class="list"  @click="goToAuctionitems">
				<view>
					<text class="amount">4</text>
				</view>
				<view>
					<text>拍卖单</text>
				</view>
			</view>
			<view class="list" @click="goToFavorite">
				<view>
					<text class="amount">128</text>
				</view>
				<view>
					<text>我的收藏</text>
				</view>
			</view>
			<view class="list" @click="goToCart">
				<view>
					<text class="amount">1</text>
				</view>
				<view>
					<text>购物车</text>
				</view>
			</view>
		</view>
		<!--钱包管理 -->
		<view class="wallet">
			<view class="account">
				<view class="list">
					<view class="price">
						<text>9000.00</text>
					</view>
					<view class="title">
						<text>账户余额</text>
					</view>
				</view>
				<view class="list" @click="goToAssure">
					<view class="price">
						<text>1000.00</text>
					</view>
					<view class="title">
						<text>我的保证金</text>
					</view>
				</view>
				
				<view class="solied" style="margin-top: 25px;">|</view>
				
				<view class="my-wallet" @click="goToWallet">
					<view class="wallet-logo">
						<image src="../../../static/钱包@2x.png" mode=""></image>
					</view>
					<view class="title">
						<text>我的钱包</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 功能模块 -->
		<view class="func">
			<view class="top">
				<view class="settings" @click="goToRealname">
					<view class="logo">
						<image src="../../../static/实名认证@2x.png" mode=""></image>
					</view>
					<view>
						<text>实名认证</text>
					</view>
				</view>
				<view class="settings" @click="goToSettled">
					<view class="logo">
						<image src="../../../static/入驻申请@2x.png" mode=""></image>
					</view>
					<view>
						<text>入驻申请</text>
					</view>
				</view>
				<view class="settings"@click="goToAddress">
					<view class="logo">
						<image src="../../../static/地址管理@2x.png" mode=""></image>
					</view>
					<view>
						<text>地址管理</text>
					</view>
				</view>
				<view class="settings" @click="goToInviteFriends">
					<view class="logo">
						<image src="../../../static/邀请好友@2x.png" mode=""></image>
					</view>
					<view>
						<text>邀请好友</text>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="settings" @click="goToSafety">
					<view class="logo">
						<image src="../../../static/安全中心@2x.png" mode=""></image>
					</view>
					<view>
						<text>安全中心</text>
					</view>
				</view>
				<view class="settings" @click="goToSetting">
					<view class="logo">
						<image src="../../../static/设置中心@2x.png" mode=""></image>
					</view>
					<view>
						<text>设置中心</text>
					</view>
				</view>
				<view class="settings" @click="goToCertificate">
					<view class="logo">
						<image src="../../../static/电子证书@2x.png" mode=""></image>
					</view>
					<view>
						<text>电子证书</text>
					</view>
				</view>
				<view class="settings" style="visibility: hidden;">
					<view class="logo">
						<image src="../../../static/电子证书@2x.png" mode=""></image>
					</view>
					<view>
						<text>电子证书</text>
					</view>
				</view>
			</view>
		</view>
		<diy-bottom-nav></diy-bottom-nav>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		methods: {
			goToInfo(){
				uni.navigateTo({
					url:'../../../pages/member/info/info'
				})		
			},
      goToWallet(){
				uni.navigateTo({
					url:'../wallet/wallet'
				})		
      },		
			goToRegister(){
				uni.navigateTo({
				  url:'../../../pages/login/register/register'
				})
			},
			goToLogin(){
				uni.navigateTo({
					url:'../../../pages/login/login/login'
				})
			},
			goToCart(){
				uni.navigateTo({
					url:'../../../pagesB/mall/cart/cart'
				})
			},
			goToCertificate(){
				uni.navigateTo({
				  url:"../certificate/certificate"
			  })
			},
			goToAssure(){
				uni.navigateTo({
					url:"../assure/assure"
				})
			},
			goToAuctionitems(){
				uni.navigateTo({
					url:"../auction/auction-items/auction-items"
				})
			},
			goToAuction(){
				uni.navigateTo({
					url:"../auction/auction"
				})
			},
			goToInvitation(){
				uni.navigateTo({
					url:"../invitation/invitation"
				})
			},
			goToFavorite(){
				uni.navigateTo({
					url:"../favorite/favorite"
				})
			},
			goToRealname(){
         uni.navigateTo({
         	url:"../realname/realname"
         })
			},
			goToSettled(){
				uni.navigateTo({
					url:"../settled/settled"
				})
			},
			goToAddress(){
				uni.navigateTo({
					url:"../address/address"
				})
			},
			goToInviteFriends(){
				uni.navigateTo({
					url:"../inviteFriends/inviteFriends"
				})
			},
			goToSafety(){
				uni.navigateTo({
					url:"../safety/safety"
				})
			},
			goToSetting(){
				uni.navigateTo({
					url:"../setting/setting"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		height: 400rpx;
		position: relative;
	}
	
	.bg image:nth-child(1) {
		width: 100%;
		height: 100%;
	}
	
	.bg .photo {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		position: absolute;
		left: 60rpx;
		bottom: 120rpx;
	}
	
	.bg .name {
		position: absolute;
		left: 200rpx;
		bottom: 150rpx;
		font-weight: 700;
	}
	
	.invitation {
		background-color:#f6cebe;
		height: 80rpx;
		width: 90%;
		position: absolute;
		bottom: 0;
		left: 5%;
		display: flex;
		justify-content: space-between;
		line-height: 80rpx;
		border-radius: 40rpx 40rpx 0 0;
	}
	
	.invitation text {
		color: #875829;
		margin-left: 40rpx;
		font-weight: 700;
	}
	
	.invitation .btn {
		width: 160rpx;
		height: 40rpx;
		margin-top: 20rpx;
		background-color: #c35924;
		color: #ffffff;
		margin-right: 40rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 40rpx;
		border-radius: 40rpx;
	}
	
	.auction {
		width: 90%;
		margin: 5%;
		height: 160rpx;
		background-color: #fefffe;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;
	}
	
		.list {
			text-align: center;
			height: 120rpx;
			margin-top: 20rpx;
			font-weight: 700;
		}
		
		.wallet {
			background-color: #fefffe;
			height: 160rpx;
			border-radius: 20rpx;
			width: 90%;
			margin: 5%;
		}
		
		.account {
			display: flex;
			justify-content: space-around;
		}
		
		.account .list {
			margin-top: 30rpx;
		}
		
		.account .price {
			color: #d24544;
			font-weight: 800;
			text-align: center;
		}
		
		.my-wallet {
			margin-top: 28rpx;
		}
		
		.wallet-logo image {
			width: 50rpx;
			height: 50rpx;
		}
		
		.my-wallet image {
			margin-top: 0;
			margin-left: 34rpx;
		}
		
		.my-wallet .title {
			margin-top: -12rpx;
			font-weight: 800;
		}
		
		.func {
			height: 320rpx;
			background-color: #fefffe;
			width: 90%;
			margin: 5%;
			border-radius: 10rpx;
		}
		
		.func .top {
			display: flex;
			justify-content: space-around;
			height: 80rpx;
		}
		
		.func .bottom {
			display: flex;
			justify-content: space-around;
			height: 80rpx;
			margin-top: 80rpx;
		}
		
		.func .logo image {
			width: 50rpx;
			height: 50rpx;
			margin-top: 20rpx;
		}
		
		.settings {
			text-align: center;
		}
		
		.settings text {
			font-size: 28rpx;
			font-weight: 700;
		}
		
		.c1 {
			display: flex;
			justify-content: space-between;
			width: 260rpx;
			height: 40rpx;
			position: absolute;
			top: 40rpx;
			right: 60rpx;
		}
		
		.c1 .register {
			width: 120rpx;
			border-radius: 20rpx;
			line-height: 40rpx;
			text-align: center;
		  background-color: #c35924;
			color: #FFFFFF;
		}
		
		.c1 .login {
			width: 120rpx;
			border-radius: 20rpx;
			line-height: 40r0px;
			text-align: center;
		  background-color: #c35924;
			color: #FFFFFF;
		}
</style>
